<template>
  <footer class="md-footer-base">
    <div class="footer-bottom">
      <div class="navs">
        <nuxt-link to="/guideline">Disclosure Guidelines</nuxt-link>
        <nuxt-link to="/condition">Terms&Conditions</nuxt-link>
        <nuxt-link to="/privacy">Privacy Policy</nuxt-link>
      </div>
      <div class="links">
        <a :href="list[0]?.dictValue" target="_blank">
          <img src="@/assets/img/dynamic/twitter.png" alt="twitter">
        </a>
        <a :href="list[1]?.dictValue" target="_blank">
          <img src="@/assets/img/dynamic/facebook.png" alt="facebook">
        </a>
        <a :href="list[2]?.dictValue" target="_blank">
          <img src="@/assets/img/dynamic/instagram.png" alt="instagram">
        </a>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'MdFooterBaseComponent',
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await this.$axios.get('web/sysDict/type/md_web_footer_platform_link')
      if (res.code == 200) {
        this.list = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.md-footer-base {
  width: 100%;
  padding: 0 170px;
  box-sizing: border-box;
  background: #070825;

  .footer-bottom {
    width: 100%;
    // max-width: 1200px;
    margin: 0 auto;
    height: 74px;
    padding: 0 40px 0 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    // justify-content: center;
    background: #070825;
    font-size: 16px;
    color: #fff;
    text-align: center;
    justify-content: space-between;
    .navs {
      a {
        font-size: 16px;
        font-family: SourceHanSansSC, SourceHanSansSC;
        font-weight: 400;
        color: #fff;
        // margin-right: 30px;
        text-decoration: none;
        margin-right: 50px;
        &:hover {
          color: #5865f1;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .links {
      display: flex;
      align-items: center;
      a {
        width: 30px;
        height: 30px;
        margin-right: 40px;
        &:last-child {
          margin-right: 0;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>